<template>
  <!-- 表头 -->
  <el-dialog title="新增部门" :visible="showDialog" @close="resetForm">
    <!-- 表单 -->
    <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="小区名称">
        <el-select v-model="formInline.region" class="box-input" placeholder="请选择小区">
          <el-option
            v-for="task in taskList"
            :key="task.communityId"
            :label="task.communityName"
            :value="task.communityId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="职位名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入职位名称" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职位描述" prop="des">
        <el-input v-model.number="ruleForm.des" placeholder="请输入职位描述" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getposition, getcommunityName } from '@/api/paopao/position'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showxingzen: false, // 弹出层
      taskList: [], // 下拉框
      formInline: {
        communityId: '',
        communityName: '',
        region: ''
      }, // 选择框
      ruleForm: {
        name: '', // 职位名称
        des: ''// 职位描述
      },
      rules: {
        name: [
          { required: true, message: '输入错误', trigger: 'blur' }
        ],
        des: [
          { trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getcommunityName()
    this.getposition()
  },
  methods: {
    async getposition() {
      this.tableData = await getposition({
        info: '', pageIndex: 1, pageSize: 10, communityId: 0
      })
    },
    async getcommunityName() {
      this.taskList = await getcommunityName()
    },
    submitForm() {
      this.showxingzen = false
    },
    resetForm() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
